export {}

/**
 * React 中的函数组件是通过函数来实现的，函数组件的公式： f(state) => UI，即：数据到视图的映射
 * 函数组件本身很简单，但因为是通过函数实现的，所以，在使用函数组件时，就会体现出函数所有的特性来
 *
 * 函数组件的特性说明：
 *
 * 1. 对于函数组件来说，每次状态更新后，组件都会重新渲染
 * 2. 每次组件更新都像是在给组件拍照，每张照片就代表组件在某个特定时刻的状态
 * 3. 也就是说：【组件的每次特定更新，都有自己的 props/state/事件处理程序等】
 * 4. 这些照片记录的状态，从代码层面来说，是通过 js 中函数的闭包机制来实现的
 *
 * 函数组件的以上特性，导致了几个问题
 *
 * 1. 组件每次重新渲染时，组件内部的事件处理程序等函数都会重新创建，
 *    导致子组件每次都会接收到不同的 props，从而重复进行不必要的渲染，从而产生性能问题
 *    解决方案：React.memo 和 useCallback/useMemo 这两个 Hooks 来解决
 * 2. 组件内的事件处理程序等函数中，只能获取到那一次(没张照片，都有自己的记录)特定渲染时的数据，这是合理的(闭包的原因)
 *    解决方案：使用 useRef Hook 来解决
 *
 * 注意：
 *
 * 1. 函数组件配置 Hooks 使用时，并不会因为闭包以及每次都创建新的函数而让组件变慢
 * 2. 在没有发现性能问题前，避免过早的性能优化
 * 3. 如果要优化，一定要考虑优化的成本是否大于优化后的价值
 *
 */
